<template>
  <!--通用的搜索树 -->
  <a-tree-select  v-model="currentValue" :tree-data="treeData" allowClear showSearch v-bind="$attrs" v-on="$listeners" 
    treeDefaultExpandAll 
    :replaceFields="{ children: 'children', title: 'name', key: 'id', value: 'id' }"
    :placeholder="placeholder">
    <a-icon v-if="fetching" style="color: #096dd9" slot="suffixIcon" type="loading" />
  </a-tree-select>
</template>
<script>
import { TreeSelect } from 'ant-design-vue'
const SHOW_CHILD = TreeSelect.SHOW_CHILD
import { Ellipsis } from '@/components' // 表格

export default {
  name: 'SelectTreeSubItem',
  components: {
    Ellipsis
  },
  data() {
    return {
      fetching: false,
      isCanClear: !this.isEdit,
      dataList: [],
      SHOW_CHILD,
      disableTreeData:[],
    }
  },
  props: {
    // v-model绑定的数据
    value: {
      type: [Array, String, Object]
    },
    // placeholder
    placeholder: {
      type: String,
      default: function () {
        return '请选择'
      }
    },
    treeData:{
      type: Array,
      default: function () {
        return []
      }
    }
  },
   computed: {
    // 转换绑定的选中数据，与v-model同步
    currentValue: {
      get: function () {
        return this.value
      },
      set: function (value) {
        this.$emit('input', value)
      },
    },
  },
  watch:{
    treeData: {
      handler(val) {
       if(val){
         this.getDisabled(val)
       }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
   getDisabled(data) {
     data.forEach(item => {  //只有末级节点可以点击
        if (item.children && item.children.length>0) {
            item.disabled = true;
            this.getDisabled(item.children)
        }
        this.disableTreeData = data;
    });
},
  
  },
  mounted() {

  }
}
</script>
